import './App.css';

//react中存在两种形式的组件: 函数式组件, 类组件
//使用 rcc 快速创建 类组件  ( 主要使用这个 )
//使用 rsf 快速创建 函数式组件

import React, { Component } from 'react';
import Child from './component/Child'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentIndex: 0,
      arr: [//一级分类数组
        {
          name: '活动专区',
          list: [
            { name: '商品1', pic: logo },
            { name: '商品2', pic: logo },
            { name: '商品3', pic: logo },
            { name: '商品4', pic: logo },
            { name: '商品5', pic: logo },
            { name: '商品6', pic: logo },
          ]
        },
        {
          name: '品牌',
          list: [
            { name: '品牌1', pic: logo },
            { name: '品牌2', pic: logo },
            { name: '品牌3', pic: logo },
            { name: '品牌4', pic: logo },
            { name: '品牌5', pic: logo },
            { name: '品牌6', pic: logo },
          ]
        }, 
        {
          name:'美容护肤',
          list:[
            {name:'美容护肤1',pic:logo},
            {name:'美容护肤2',pic:logo},
            {name:'美容护肤3',pic:logo},
            {name:'美容护肤4',pic:logo},
            {name:'美容护肤5',pic:logo},
            {name:'美容护肤6',pic:logo},
          ]
        }
      ]
    }
    this.handleClick.bind(this);
  }
  handleClick(index){
    //setState() 更新组件状态
    //setState() 会将传入的参数的属性和原有的组件state进行合并
    //setState() 会触发组件更新，组件更新时当前组件的render方法会立即重新执行，render方法内的所有js代码都会重新执行.

    //this.state.currentIndex = index;这样无法触发组件更新

    //特点：只有调用setState当前组件一定更新(render方法调用了)
    //特点：只要调用setState 对当前组件状态更新是异步的值，想要获取只能在setState的第二个参数的回调函数中获取
    this.setState({
      currentIndex:index
    },()=>{
      console.log(this.state.currentIndex);
    })
    //console.log(this.state.currentIndex);不要再这里获取state最新的值，因为获取不到
  }
  render() { //渲染组件模板到视图
    // <></> 充当的是一个包裹元素(包裹其他标签), 最终在页面中不会渲染.
    return (
      <>
        <div className='app'>
          
          <div className="div left">
            {
              // onClick={函数}
              this.state.arr.map((item,index)=>{
                return (
                  // 事件绑定
                  // onClick={function(){}}
                  // onClick={()=>{}}
                  // onClick={this.handleClick}

                  // 事件绑定,解决this指向问题
                  // onClick={function(){}.bind(this)}
                  // onClick={()=>{}}
                  // onClick={this.handleClick.bind(this)}

                  // 事件绑定,事件处理函数传参
                  // onClick={function(){  }}
                  // onClick={()=>{ }}
                  // onClick={()=>{ this.handleClick(index) }}

                  // style绑定 style={{}}
                  // <div className="btn" style={{color: this.state.currentIndex == index ? 'red' : '',backgroundColor: this.state.currentIndex == index ? 'gray' : '', fontWeight: this.state.currentIndex == index ? 'bold' : '' }} onClick={ ()=>{  

                  //class绑定 className={}
                  // <div className={`btn ${this.state.currentIndex == index ? 'active':''}` }   onClick={ ()=>{  

                  <div className={`btn ${this.state.currentIndex == index ? 'active':''}` }   onClick={ ()=>{  
                      this.handleClick(index)  
                    } }>{item.name}</div>
                )
              })
            }
          </div>
          <div className="right">
            {
              //渲染右侧列表
              this.state.arr[this.state.currentIndex].list.map((item,index)=>{
                //sfkshdfkhsdfkh
                return (
                  <div className="item">
                    <img src={item.pic} alt="" />
                    <div className="name">{item.name}</div>
                  </div>
                )
              })
            }
          </div>

        </div>
        <Child title="今天学习props" count={100} />
      </>
    );
  }
}

export default App;